<script setup lang="ts">
import { defineEmits, defineProps } from 'vue'

// Props 类型定义
interface Props {
  modelValue: boolean
  message?: string
  loginUrl?: string
  loginText?: string
  cancelText?: string
}

// 默认 props
const props = withDefaults(defineProps<Props>(), {
  message: '您未登录，请先登录后再进行操作',
  loginUrl: '/pages/login/index',
  loginText: '登录',
  cancelText: '取消',
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

function close(type: string) {
  emit('update:modelValue', false)
  console.log('close', type)
  uni.switchTab({
    url: '/pages/home/index',
  })
}

function goLogin() {
  emit('update:modelValue', false)
  console.log('goLogin')
  uni.navigateTo({
    url: props.loginUrl,
  })
}
</script>

<template>
  <transition name="fade-zoom">
    <div
      v-if="modelValue"
      class="fixed inset-0 z-999 flex items-center justify-center bg-black bg-opacity-70"
      @click="close('overlay')"
    >
      <!-- 这里阻止内部容器的点击冒泡 -->
      <div class="z-99999 flex items-center justify-center" @click.stop>
        <div class="h-[650rpx] w-[520rpx] rounded-lg bg-white p-5 text-center">
          <div class="mb-4 h-40 w-full flex items-center justify-center text-blue-500">
            <img src="@/static/svg/no-login.svg" alt="login" class="h-35 w-35">
          </div>
          <p class="mb-6 text-gray-700">
            {{ message }}
          </p>
          <div class="z-99999 w-full flex flex-col gap-3">
            <wd-button
              type="primary"
              size="large"
              block
              :round="false"
              @click.stop="goLogin"
            >
              {{ loginText }}
            </wd-button>
            <wd-button
              type="info"
              size="large"
              block
              :round="false"
              @click.stop="close('btn')"
            >
              {{ cancelText }}
            </wd-button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
/* 背景淡入淡出（已有） */
.fade-zoom-enter-active,
.fade-zoom-leave-active {
  transition: all 0.3s ease;
}

.fade-zoom-enter-from {
  opacity: 0;
  transform: scale(0.95) translateY(30px);
}
.fade-zoom-enter-to {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.fade-zoom-leave-from {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.fade-zoom-leave-to {
  opacity: 0;
  transform: scale(0.95) translateY(30px);
}
</style>
